<template>
  <div>
    <el-select
      v-model="data[option.name_]"
      placeholder="请至少输入2个字符查找"
      :multiple="!option.single"
      filterable
      :disabled="!!option.readOnly ? true : false"
      remote
      :remote-method="remoteMethod"
      @change="changeSelect"
    >
      <el-option
        v-for="item in option.options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </div>
</template>

<script setup name="remoteSelect">
const props = defineProps({
  option: {
    type: Object,
    default: () => {
      return {};
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  outParams: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const remoteMethod = (query) => {
  if (query && query.length >= 2) {
    let param = {};
    param.keyword = query;
    getOptions(param);
    return;
  }
  handleClear();
};
const getOptions = (param) => {
  this.$http({
    url: props.option.api.url,
    method: props.option.api.method,
    data: param,
  }).then((res) => {
    if (res.success) {
      this.$set(props.option, 'options', res.data);
    } else {
      this.$message.error(res.message);
    }
  });
};
const changeSelect = () => {
  this.handleClear();
};
const handleClear = () => {
  this.$set(props.option, 'options', []);
};
</script>

<style scoped lang="less"></style>
